<script setup lang='ts'>
import { onMounted, ref } from "vue";
import swipe from "../../components/swipe.vue";
import classification from "../../components/classification.vue";
import noticeBar from "../../components/noticeBar.vue";
import indexBar from "../../components/indexBar.vue";
import content from "../../components/content.vue";
import annPC from "../../components/pc/annPC.vue";
import titlepc from "../../components/pc/titlepc.vue";
import contentpc from "../../components/pc/contentpc.vue";
import carousel from "../../components/pc/carousel.vue";
import { getMaterial, getDataMaterial } from "../../api/api";
const data = ref()
const friends = ref()
const fire = ref()
const photo = ref()
const sendgiftpc = ref()
const friendspc = ref()
const firepc = ref()
const photopc = ref()
const sendgift = ref()
onMounted(async () => {
    getData()
    friends.value = (await getMaterial()).data.data.filter((item: { selectData: string }) => item.selectData === '人物').slice(0, 6)
    fire.value = (await getMaterial()).data.data.filter((item: { selectData: string }) => item.selectData === '武器').slice(0, 6)
    photo.value = (await getMaterial()).data.data.filter((item: { selectData: string }) => item.selectData === '地图').slice(0, 6)
    sendgift.value = (await getMaterial()).data.data.filter((item: { selectData: string }) => item.selectData === '物品').slice(0, 6)

    friendspc.value = (await getMaterial()).data.data.filter((item: { selectData: string }) => item.selectData === '人物').slice(0, 8)
    firepc.value = (await getMaterial()).data.data.filter((item: { selectData: string }) => item.selectData === '武器').slice(0, 8)
    photopc.value = (await getMaterial()).data.data.filter((item: { selectData: string }) => item.selectData === '地图').slice(0, 8)
    sendgiftpc.value = (await getMaterial()).data.data.filter((item: { selectData: string }) => item.selectData === '物品').slice(0, 8)
})

const getData = async () => {
    const res = await getDataMaterial()
    data.value = res.data.data
}
</script>

<template>
    <div class="m">
        <swipe></swipe>
        <noticeBar></noticeBar>
        <indexBar title="推荐分类">
            <van-icon name="good-job" size="20" />
        </indexBar>
        <classification></classification>
        <indexBar title="人物素材">
            <van-icon name="friends" size="20" />
        </indexBar>
        <content :data="friends"></content>
        <indexBar title="武器素材">
            <van-icon name="fire" size="20" />
        </indexBar>
        <content :data="fire"></content>
        <indexBar title="物品素材">
            <van-icon name="send-gift" size="20" />
        </indexBar>
        <content :data="sendgift"></content>
        <indexBar title="地图素材">
            <van-icon name="photo" size="20" />
        </indexBar>
        <content :data="photo"></content>
    </div>
    <div class="pc">
        <div class="h"></div>
        <carousel></carousel>
        <annPC></annPC>
        <titlepc :num="-80" title="人物素材"></titlepc>
        <contentpc :data="friendspc" :isTrue="false"></contentpc>
        <titlepc :num="-160" title="武器素材"></titlepc>
        <contentpc :data="firepc" :isTrue="false"></contentpc>
        <titlepc :num="-320" title="物品素材"></titlepc>
        <contentpc :data="photopc" :isTrue="false"></contentpc>
        <titlepc :num="-400" title="地图素材"></titlepc>
        <contentpc :data="sendgiftpc" :isTrue="false"></contentpc>
    </div>
</template>

<style scoped>
.h {
    height: 20px;
}

@media screen and (max-width:1024px) {
    .m {
        display: block;
    }

    .pc {
        display: none;
    }
}

@media screen and (min-width:1025px) {
    .m {
        display: none;
    }

    .pc {
        display: block;
    }
}
</style>